<style type="text/css">
.dpr01buh {
  width: 100%;
  margin-top: 10px;
}
.dpr01buh thead {
  border-bottom: #ccc solid 1px;
}
.dpr01buh td {
  padding: 5px 0;
  margin: 0;
}
</style>



<table width="100%" style="">
<tr>
  <td width="55%" valign="top">
    <div class="kpr-boxlet-grp">
      <div class="kbg-title">Cluster Information</div>
    </div>

    <div id="kpr_dash_overview" class="kpr-boxlet"></div>
  </td>
  
  <td width="20px"></td>

  <td valign="top">
    <div class="kpr-boxlet-grp">
      <div class="kbg-title">Buckets Statistics</div>
    </div>

    <div id="kpr_dash_buckets" class=""></div>
  </td>
</tr>
</table>

<div class="hide">

<div id="kpr_dash_overview_tpl" class="hide">
  <div class="kb-title">{[=it.name]}</div>
  <table width="100%">
    <tr>
        <td class="kb-colbox">
          <div class="kbc-title">Version</div>
          <div class="kbc-value">{[=it.version]}</div>
        </td>
        <td class="kb-colbox">
          <div class="kbc-title">Data Keys</div>
          <div class="kbc-value">{[=it.dataKeyNum]}</div>
        </td>
        <td class="kb-colbox">
          <div class="kbc-title">Storage</div>
          <div class="kbc-value">
            {[=_kpr_storage_size_format(it.dataSize)]}
          </div>
        </td>
        <td class="kb-colbox">
          <div class="kbc-title">Uptime</div>
          <div class="kbc-value">
            {[=_kpr_uptime_format(it.uptime)]}
          </div>
        </td>
    </tr>
  </table>
  <table class="dpr01buh">
    <thead>
      <tr>
        <td>Peers</td>
        <td>Status</td>
        <td align="right">Load</td>
      </tr>
    </thead>
    <tbody>
    {[~it.peers :v]}
      <tr>
        <td>{[=v.addr]}:{[=v.port]}</td>
        <td>
          {[ if (v.osinfo.cn === 0) { ]}
          <span class="label label-danger">offline</span>
          {[ } else if (v.id === it.leader.id) { ]}
          <span class="label label-success">leader</span>
          {[ } else { ]}
          <span class="label label-default">follower</span>
          {[ } ]}
        </td>
        <td align="right">{[=(v.osinfo.ld[0] / 65536).toFixed(2)]}</td>
      </tr>
    {[~]}
    </tbody>
  </table>
</div>


<div id="kpr_dash_buckets_tpl" class="hide">
  {[~it.data :v]}
  <div class="kpr-boxlet">
  <div class="kb-title">/{[=v.name]} ({[=v.desc]})</div>
  <table width="100%">
    <tr>
        <td class="kb-colbox">
          <div class="kbc-title">Data Keys</div>
          <div class="kbc-value">{[=v.stateDataKeys]}</div>
        </td>
        <td class="kb-colbox">
          <div class="kbc-title">Data Size</div>
          <div class="kbc-value">{[=_kpr_storage_size_format(v.stateDataSize)]}</div>
        </td>
        <td class="kb-colbox">
          <div class="kbc-title">Access Keys</div>
          <div class="kbc-value">{[=v.accessKeys]}</div>
        </td>
    </tr>
  </table>
  </div>
  {[~]}
</div>

</div>
<script>

var _kpr_boxlet_overview_timer = setInterval(_kpr_boxlet_overview, 3000);
var _kpr_boxlet_buckets_timer = setInterval(_kpr_boxlet_buckets, 3000);


function _kpr_uptime_format(seconds)
{
    var fmt = "";

    if ((t = parseInt(seconds / 86400, 10)) > 0) {

        if (t > 1) {
            fmt = t + " days, ";
        } else {
            fmt = t + " day, ";
        }
    }

    seconds = seconds % 86400;
    var hr = parseInt(seconds / 3600, 10);
    if (hr < 10) {
        fmt += "0";
    }
    fmt += hr + ":";
    
    seconds = seconds % 3600;
    var mn = parseInt(seconds / 60, 10);
    if (mn < 10) {
        fmt += "0";
    }
    fmt += mn;

    return fmt;
}

function _kpr_storage_size_format(size)
{
    if (size > 1073741824) {
        return (size / 1073741824).toFixed(2) + " <span>GB</span>";
    } else if (size > 1048576) {
        return (size / 1048576).toFixed(2) + " <span>MB</span>";
    } else if (size > 1024) {
        return (size / 1024).toFixed(2) + " <span>KB</span>";
    }

    return size + " <span>Bytes</span>";
}

function _kpr_boxlet_overview()
{
    if (!document.getElementById("kpr_dash_overview")) {
        clearInterval(_kpr_boxlet_overview_timer);
        return;
    }

    $.ajax({
        url     : "/keeper/v1/sys/info",
        type    : "GET",
        timeout : 2000,
        success : function(rsp) {
            var rsj = JSON.parse(rsp);
            if (rsj.status != 200) {
                return;
            }
            lessTemplate.RenderFromId("kpr_dash_overview", "kpr_dash_overview_tpl", rsj.data);
        },
        error: function(xhr, textStatus, error) {
            //
        }
    });
}
_kpr_boxlet_overview();

function _kpr_boxlet_buckets()
{
    if (!document.getElementById("kpr_dash_buckets")) {
        clearInterval(_kpr_boxlet_buckets_timer);
        return;
    }

    $.ajax({
        url     : "/keeper/v1/stats/buckets?buckets=sys,log",
        type    : "GET",
        timeout : 2000,
        success : function(rsp) {
            var rsj = JSON.parse(rsp);
            //console.log(rsj);
            if (rsj.action != "stats.buckets") {
                return;
            }
            lessTemplate.RenderFromId("kpr_dash_buckets", "kpr_dash_buckets_tpl", rsj);
        },
        error: function(xhr, textStatus, error) {
            //
        }
    });
}
_kpr_boxlet_buckets();
</script>